<template>
  <div>
    <!-- 放大缩小模块 -->
    <div class="scale" :style="changeBotttom">
      <div class="change3DOr2D" @click="set2dOr3d">{{is2dOr3d}}</div>
      <div class="biger" @click="biger"></div>
      <div class="smaller" @click="smaller"></div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  props: {},
  data() {
    return {
      // 2D/3D切换
      is2dOr3d: "2D"
    };
  },
  computed: {
    // 改变放大缩小模块bottom
    changeBotttom() {
      if (this.$store.state.isBigScreen) {
        if (
          this.$store.state.isShowSetPoint ||
          this.$store.state.isShowGuidedSearchPathPart ||
          this.$store.state.isShowShareMap
        ) {
          return {
            bottom: "177px"
          };
        } else if (this.$store.state.isStartMoGo) {
          return {
            bottom: "100px"
          };
        } else {
          return {
            bottom: "40px"
          };
        }
      } else {
        if (
          this.$store.state.isShowSetPoint ||
          this.$store.state.isShowGuidedSearchPathPart ||
          this.$store.state.isShowShareMap
        ) {
          return {
            bottom: "135px"
          };
        } else if (this.$store.state.isStartMoGo) {
          return {
            bottom: "58px"
          };
        } else {
          return {
            bottom: "-2px"
          };
        }
      }
    }
  },
  created() {},
  mounted() {},
  watch: {},
  methods: {
    // 更换2D/3D模式
    set2dOr3d() {
      if (this.is2dOr3d == "3D") {
        this.is2dOr3d = "2D";
        map.setViewMode("3D");
      } else {
        this.is2dOr3d = "3D";
        map.setViewMode("2D");
      }
    },
    // 放大地图
    biger() {
      map.cameraRadius -= 1000;
    },
    // 缩小地图
    smaller() {
      map.cameraRadius += 1000;
    }
  },
  components: {}
};
</script>

<style lang='less'>
// 放大缩小模块
.scale {
  width: 40px;
  height: auto;
  position: fixed;
  right: 8px;
  border: none;
  border-radius: 3px;
  transition: all 0.5s;
  .change3DOr2D {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: #a2a2a2;
    text-align: center;
    font-size: 14px;
    line-height: 40px;
    margin-bottom: 10px;
    position: relative;
    border-radius: 3px;
    box-shadow: 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16);
  }
  .biger {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    margin-bottom: 10px;
    position: relative;
    border-radius: 3px;
    box-shadow: 0px 0px 1.5px 0px rgba(0, 0, 0, 0.16);
  }
  .smaller {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    margin-bottom: 10px;
    position: relative;
    border-radius: 3px;
    box-shadow: 0px 0px 0.04rem 0px rgba(0, 0, 0, 0.16);
  }
  .biger:before,
  .smaller:before {
    content: "";
    display: block;
    width: 13px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
  }
  .biger::before {
    margin-top: -6px;
    height: 11px;
    /* background: url('../images/sy_fangda.png') center center no-repeat; */
    background: url("https://files.ckiosk.cn/wxshare/image/sy_fangda.png")
      center center no-repeat;
    background-size: contain;
  }
  .smaller::before {
    height: 11px;
    margin-top: -6px;
    /* background: url('../images/suoxiao.png') center center no-repeat; */
    background: url("https://files.ckiosk.cn/wxshare/image/suoxiao.png") center
      center no-repeat;
    background-size: contain;
  }
}
</style>
